<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居家养老服务预约</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://webapi.amap.com/loader.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            padding: 0 15px;
        }
        .step-item.active {
            color: #e74c3c;
            border-bottom: 3px solid #e74c3c;
        }
        .step-item.completed {
            color: #27ae60;
        }
        .time-slot {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px 12px;
            margin: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .time-slot:hover {
            background-color: #f0f0f0;
        }
        .time-slot.selected {
            background-color: #e74c3c;
            color: white;
            border-color: #e74c3c;
        }
        .time-slot.disabled {
            background-color: #eee;
            color: #999;
            cursor: not-allowed;
        }
        .address-item {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .address-item:hover {
            border-color: #e74c3c;
        }
        .address-item.selected {
            border-color: #e74c3c;
            background-color: #fff0f0;
        }
        .btn-next {
            background-color: #e74c3c;
            color: white;
            border-radius: 4px;
            padding: 12px;
            font-size: 16px;
            width: 100%;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-next:hover {
            background-color: #c0392b;
        }
        .form-control {
            margin-bottom: 15px;
        }
        .form-control label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .form-control input, .form-control textarea, .form-control select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-control textarea {
            min-height: 80px;
        }
        .tag {
            display: inline-block;
            padding: 4px 8px;
            background-color: #f0f0f0;
            border-radius: 4px;
            margin-right: 5px;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .tag:hover {
            background-color: #e0e0e0;
        }
        .tag.selected {
            background-color: #e74c3c;
            color: white;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
        #map-container {
            height: 200px;
            width: 100%;
            margin-top: 10px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="elderly-service-detail.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">居家养老服务预约</h1>
        </div>
    </header>

    <div class="container py-4">
        <!-- 步骤导航 -->
        <div class="flex justify-between mb-8">
            <div class="step-item active text-center">
                <div class="w-8 h-8 rounded-full bg-e74c3c text-white flex items-center justify-center mx-auto mb-1">1</div>
                <div>选择时间</div>
            </div>
            <div class="step-item text-center">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center mx-auto mb-1">2</div>
                <div>填写信息</div>
            </div>
            <div class="step-item text-center">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center mx-auto mb-1">3</div>
                <div>确认预约</div>
            </div>
        </div>

        <!-- 预约时间选择 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-calendar-alt text-e74c3c mr-2"></i>选择预约时间</h3>
            
            <div class="mb-4">
                <label class="block mb-2">选择日期</label>
                <div class="flex overflow-x-auto pb-2">
                    <div class="date-item text-center mr-4">
                        <div class="text-sm mb-1">今天</div>
                        <div class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center">20</div>
                    </div>
                    <div class="date-item text-center mr-4">
                        <div class="text-sm mb-1">明天</div>
                        <div class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center">21</div>
                    </div>
                    <div class="date-item text-center mr-4">
                        <div class="text-sm mb-1">周三</div>
                        <div class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center">22</div>
                    </div>
                    <div class="date-item text-center mr-4">
                        <div class="text-sm mb-1">周四</div>
                        <div class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center">23</div>
                    </div>
                    <div class="date-item text-center mr-4">
                        <div class="text-sm mb-1">周五</div>
                        <div class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center">24</div>
                    </div>
                </div>
            </div>
            
            <div>
                <label class="block mb-2">选择时间段</label>
                <div class="flex flex-wrap">
                    <div class="time-slot">08:00-10:00</div>
                    <div class="time-slot selected">10:00-12:00</div>
                    <div class="time-slot">13:00-15:00</div>
                    <div class="time-slot disabled">15:00-17:00</div>
                    <div class="time-slot">17:00-19:00</div>
                </div>
            </div>
        </div>

        <!-- 服务地址填写 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-map-marker-alt text-e74c3c mr-2"></i>服务地址</h3>
            
            <div class="mb-4">
                <label class="block mb-2">常用地址</label>
                <div class="address-item selected">
                    <div class="flex justify-between">
                        <div class="font-medium">家庭地址</div>
                        <div><i class="fas fa-check text-e74c3c"></i></div>
                    </div>
                    <div class="text-sm text-gray-600">北京市朝阳区建国路88号SOHO现代城A座1503室</div>
                </div>
                <div class="address-item">
                    <div class="flex justify-between">
                        <div class="font-medium">父母家</div>
                        <div><i class="fas fa-check text-gray-300"></i></div>
                    </div>
                    <div class="text-sm text-gray-600">北京市海淀区中关村南大街5号院3号楼502</div>
                </div>
                <button class="text-e74c3c mt-2"><i class="fas fa-plus mr-1"></i>新增地址</button>
            </div>
            
            <div class="form-control">
                <label>详细地址补充</label>
                <input type="text" placeholder="例如：几号楼几单元几层">
            </div>
            
            <div class="form-control">
                <label>地图定位</label>
                <div id="map-container"></div>
            </div>
        </div>

        <!-- 联系人信息 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-user text-e74c3c mr-2"></i>联系人信息</h3>
            
            <div class="form-control">
                <label>主要联系人姓名</label>
                <input type="text" placeholder="请输入姓名">
            </div>
            
            <div class="form-control">
                <label>主要联系人电话</label>
                <input type="tel" placeholder="请输入手机号码">
            </div>
            
            <div class="form-control">
                <label>紧急联系人姓名</label>
                <input type="text" placeholder="请输入姓名">
            </div>
            
            <div class="form-control">
                <label>紧急联系人电话</label>
                <input type="tel" placeholder="请输入手机号码">
            </div>
        </div>

        <!-- 需求备注 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <h3 class="text-lg font-semibold mb-4"><i class="fas fa-edit text-e74c3c mr-2"></i>需求备注</h3>
            
            <div class="mb-4">
                <label class="block mb-2">常用备注标签</label>
                <div>
                    <span class="tag">需要测量血压</span>
                    <span class="tag selected">需要助浴服务</span>
                    <span class="tag">需要陪同就医</span>
                    <span class="tag">需要做饭服务</span>
                    <span class="tag">需要清洁服务</span>
                </div>
            </div>
            
            <div class="form-control">
                <label>其他需求说明</label>
                <textarea placeholder="请详细描述您的特殊需求"></textarea>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg" style="max-width: 750px; margin: 0 auto;">
            <button class="btn-next" onclick="window.location.href='elderly-confirm.html'">下一步</button>
        </div>
    </div>

    <script>
        // 初始化地图
        AMapLoader.load({
            key: "d17c17f8f712c81a7e4241aff4faa7b0",
            plugins: ["AMap.Geocoder", "AMap.PlaceSearch"]
        }).then((AMap) => {
            const map = new AMap.Map('map-container', {
                zoom: 15,
                center: [116.481181, 39.989792]
            });
            
            // 添加标记点
            const marker = new AMap.Marker({
                position: [116.481181, 39.989792],
                map: map
            });
        }).catch((e) => {
            console.error(e);
        });

        // 日期选择
        document.querySelectorAll('.date-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.date-item').forEach(i => {
                    i.querySelector('div:last-child').classList.remove('border-e74c3c', 'bg-e74c3c', 'text-white');
                });
                this.querySelector('div:last-child').classList.add('border-e74c3c', 'bg-e74c3c', 'text-white');
            });
        });

        // 时间段选择
        document.querySelectorAll('.time-slot:not(.disabled)').forEach(slot => {
            slot.addEventListener('click', function() {
                document.querySelectorAll('.time-slot').forEach(s => {
                    s.classList.remove('selected');
                });
                this.classList.add('selected');
            });
        });

        // 地址选择
        document.querySelectorAll('.address-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.address-item').forEach(i => {
                    i.classList.remove('selected');
                    i.querySelector('.fa-check').classList.remove('text-e74c3c');
                    i.querySelector('.fa-check').classList.add('text-gray-300');
                });
                this.classList.add('selected');
                this.querySelector('.fa-check').classList.remove('text-gray-300');
                this.querySelector('.fa-check').classList.add('text-e74c3c');
            });
        });

        // 标签选择
        document.querySelectorAll('.tag').forEach(tag => {
            tag.addEventListener('click', function() {
                this.classList.toggle('selected');
            });
        });
    </script>
</body>
</html>